<template>
  <div class="list">
    <ul>
      <li>
        <div style="display: flex">
          <input class="ais-SearchBox-input" type="text"
            v-model="articleSearch"
            placeholder="输入地址码" maxlength="32">
          <div class="ais-SearchBox-submit" @click="selectArticle">
            <el-icon :size="20">
              <Search />
            </el-icon>
          </div>
        </div>
      </li>
      <li v-for="item in list" :key="item.device_id">
        <div class="item">
          <p class="device_type">{{ item.device_type_name }}</p>
          <span :style="{ 'color': item.is_online == 1 ? '#04be02' : 'red' }">{{ item.is_online == 1 ? '在线' : '离线'
          }}</span>
        </div>
        <p class="item_wrap">地区：{{ item.region }}</p>
        <p class="item_wrap">编号：{{ item.equip_num }}</p>
        <p class="item_wrap">地址码：{{ item.equip_addr }}</p>
        <div class="m-t-15" @click="handlerDetail(item)">
          <!-- <el-button type="primary">详情</el-button> -->
          <p class="collection-btn" :class="current == item.device_id ? 'active' : ''">查看详情</p>
        </div>
        <el-divider border-style="dashed" />
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs,defineComponent } from 'vue'
// import { device } from "@/api/login.js"
export default defineComponent({
  setup(props,ctx) {
    const data = reactive({
      list: [],
      articleSearch: "",
      current: ""
    })
    const getList = () => {
      // device({ page_size: 99999999999, page_id: 1, equip_addr: data.articleSearch }).then(r => {
      //   data.list = r.data.records;
      //   ctx.emit("records", r.data.records)
      // }).catch(error => {

      // })
    }
    const handlerDetail = (value) => {
      ctx.emit("lonLat",value.lon_lat)
      data.current = value.device_id
    }
    const selectArticle = () => {
      getList()
    }
    onMounted(() => {
      getList()
    })

    return {
      ...toRefs(data),
      selectArticle,
      handlerDetail
    }
  }
})
</script>

<style lang="scss" scoped>
.list {
  position: absolute;
  padding: 10px;
  top: 5%;
  left: 50px;
  width: 203px;
  height: 90%;
  border: 1px solid #4f6069;
  // background-color: #38e1ff4a;
  box-shadow: 0 0 10px 2px #4f6069;
  animation: slide 2s;
  z-index: 999;
  color: $color_white;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;

  .device_type {
    font-weight: 600;
    font-size: 16px;
  }
}

.active {}

.device_type {
  // font-weight: 600;
  font-size: 14px;
  color: #f09e28;
}

.item_wrap {
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  color: $color_white;
}

.ais-SearchBox-input {
  padding-left: 14px;
  height: 28px;
  // width: calc(100% - 50px);
  outline: 0;
  border: 2px solid $lightGreen;
  border-right: 0;
  border-radius: 40px 0 0 40px;
  color: $maxGreyFont;
  background: $color_white;
}

.ais-SearchBox-submit {
  // height: 30px;
  width: 50px;
  border: 2px solid $lightGreen;
  border-radius: 0 40px 40px 0;
  background: $color_white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $maxGreyFont;
  border-left: 0;
}

.collection-btn {
  position: relative;
  // margin-top: 12px;
  background: $lightGreen;
  cursor: pointer;
  width: 100%;
  height: 30px;
  border-radius: 1rem;
  text-align: center;
  line-height: 30px;
  color: $color_white;
  overflow: hidden;
  z-index: 1;
  // margin-bottom: 25px;
}

.collection-btn::before {
  background: $gradualRed;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform 0.5s ease-out;
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  border-radius: 1rem;
  z-index: -1;
}

.collection-btn:hover::before {
  transform: scaleX(1);
}

.active {
  background: $gradualRed;
}
</style>